<template>
  <div>
    <van-form
      style="padding-bottom: 60px"
      input-align="right"
      error-message-align="right"
      :show-error-message="false"
      show-error
      scroll-to-error
      validate-first
      @failed="onFailed"
      @submit="onSubmit"
    >
      <van-field
        v-model="obj.content"
        name="content"
        label="服务内容"
        required
        label-width="60%"
        input-align="right"
        placeholder="点击填写"
        :rules="[{ required: true, message: '请输入服务内容' }]"
      />
      <van-field
        required
        readonly
        is-link
        input-align="right"
        :value="breedName"
        name="breedCode"
        label="品种"
        placeholder="请选择"
        :rules="[{ required: true, message: '请选择品种' }]"
        @click="openChoose()"
      />
      <van-field
        required
        readonly
        is-link
        input-align="right"
        :value="gradeName"
        name="gradeCode"
        label="等级"
        placeholder="请选择"
        :rules="[{ required: true, message: '请选择等级' }]"
        @click="openChoose2()"
      />
      <van-popup v-model="natureShows1" position="bottom">
        <van-picker
          show-toolbar
          :columns="varietiesList"
          value-key="name"
          @confirm="onConfirmType"
          @cancel="natureShows1 = false"
        />
      </van-popup>

      <van-popup v-model="natureShows2" position="bottom">
        <van-picker
          show-toolbar
          :columns="levelList"
          value-key="name"
          @confirm="onConfirmType2"
          @cancel="natureShows2 = false"
        />
      </van-popup>
      <van-field
        v-model="obj.price"
        name="price"
        label="价格（元）"
        required
        label-width="60%"
        input-align="right"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入价格（元）' }]"
      />
      <van-field v-model="obj.earLabelNo" label="耳标号" label-width="60%" input-align="right" placeholder="点击填写" />
      <van-field
        v-model="obj.contacts"
        name="contacts"
        label="联系人"
        required
        label-width="60%"
        input-align="right"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入联系人' }]"
      />
      <van-field
        v-model="obj.telephone"
        name="telephone"
        label="联系电话"
        required
        label-width="60%"
        input-align="right"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入联系电话' }]"
      />
      <van-field
        v-model="result"
        is-link
        readonly
        required
        name="result"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
        :rules="[{ required: true, message: '请选择省市区' }]"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area :area-list="areaList" @confirm="onConfirm3" @cancel="showArea = false" />
      </van-popup>
      <van-field
        v-model="obj.address"
        name="address"
        label="详细地址"
        required
        label-width="60%"
        input-align="right"
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入详细地址' }]"
      />
      <van-field
        readonly
        :value="obj.startDate"
        name="startDate"
        label="服务开始时间"
        placeholder="请选择开始时间"
        input-align="right"
        required
        is-link
        @click="showPicker1 = true"
        :rules="[{ required: true, message: '请选择开始时间' }]"
      />
      <van-popup v-if="!isDisabled" v-model="showPicker1" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          @confirm="onConfirmStartDate"
          @cancel="showPicker1 = false"
        />
      </van-popup>
      <van-field
        readonly
        :value="obj.endDate"
        name="endDate"
        label="服务结束时间 "
        placeholder="请选择结束时间"
        input-align="right"
        required
        is-link
        @click="showPicker2 = true"
        :rules="[{ required: true, message: '请选择结束时间' }]"
      />
      <van-popup v-if="!isDisabled" v-model="showPicker2" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          @confirm="onConfirmStartDate2"
          @cancel="showPicker2 = false"
        />
      </van-popup>
      <!-- <div style="background: #fff; padding: 10px 15px">
        <p class="col-333 font-15"></p>

        <van-field
          v-model="obj.fileInfoList"
          label="图片"
          name="uploader"
          required
          label-width="60%"
          input-align="right"
          :rules="[{ required: true, message: '请上传图片' }]"
        />
        <upload-img v-model="obj.fileInfoList" :maxCount="4" :isDetails="false"></upload-img>
        <div class="tip">注：支持格式JPG、JPEG、PNG，最多上传4张照片，单个不超 过5M。</div>
      </div> -->
      <van-field class="imgSty" input-align="left" required name="fileInfoList" label="图片" :rules="[{ required: true, message: '请选择图片' }]">
          <template #input>
        <upload-img v-model="obj.fileInfoList" :maxCount="4" :isDetails="false"></upload-img>
        <div class="tip">注：支持格式JPG、JPEG、PNG，最多上传4张照片，单个不超 过5M。</div>
          </template>
        </van-field>
      <van-field
        v-model="obj.details"
        name="details"
        label="详情"
        type="textarea"
        required
        input-align="left"
        rows="4"
        maxlength="100"
        placeholder="请输入详情"
      />
      <div class="spacing" />

      <div class="add-btn">
        <van-button
          block
          type="info"
          color="#37B5B5"
          style="width: 85%; margin: auto; margin-top: 50px"
          native-type="submit"
          size="large"
          :loading="loading"
          loading-text="提交中..."
          >发布</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import {
  Form,
  Field,
  Calendar,
  RadioGroup,
  Radio,
  Dialog,
  Toast,
  DatetimePicker,
  Picker,
  Button,
  Icon,
  Popup,
  Cell,
  Area
} from 'vant'
import UploadImg from '@/components/uploadImg'
import dayjs from 'dayjs'
import { getValue, setValue, clearValue } from '@/utils/auth'
import { getHandle, postHandle } from '../../api'
import { breedList } from '@/api/supply'

import areaList from '@/utils/area.js'
export default {
  components: {
    UploadImg,
    [Form.name]: Form,
    [Field.name]: Field,
    [Calendar.name]: Calendar,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Cell.name]: Cell,
    [Dialog.Component.name]: Dialog.Component,
    [Area.name]: Area
  },
  data() {
    return {
      natureShows1: false,
      natureShows2: false,

      currentDate: new Date(),
      showPicker1: false,
      showPicker2: false,
      loading: false,
      isDisabled: false,
      natureShows: false,
      natureNameList: [],
      natureShow: false,
      houseInfoId: getValue('fzmHourseId') || '',
      productName: {},
      showArea: false,
      areaList: areaList,
      breedName: '',
      gradeName: '',
      result: '',
      fileInfoList: [],
      obj: {
        breedCode: '',
        content: '',
        gradeCode: '',
        contacts: '',
        telephone: '',
        provinceCode: '',
        cityCode: '',
        countyCode: '',
        address: '',
        startDate: '',
        endDate: '',
        price: '',
        earLabelNo: '',
        uploadImgs: '',
        fileInfoList: [],
        type: 0,
        tenantCode: getValue('tenantCode'),
        subjectInfoId: getValue('subjectInfoId')
      },
      type: null,
      varietiesList: [],
      levelList: []
    }
  },
  created() {
    this.loadZidian()
  },
  mounted() {},
  methods: {
    loadZidian() {
      breedList({ pCode: 'T000010_MILKGOATVARIETY' }).then(res => {
        if (res.status === 0) {
          const datas = res.data.options
          this.varietiesList = datas.map(item => {
            return {
              id: item.value,
              name: item.label
            }
          })
        }
      })

      breedList({ pCode: 'T000010_LEVEL_DATA' }).then(res => {
        if (res.status === 0) {
          const datas = res.data.options
          this.levelList = datas.map(item => {
            return {
              name: item.label,
              id: item.value
            }
          })
        }
      })
    },

    onSubmit() {
      this.loading = true
      // var str = ''
      // if (this.fileInfoList) {
      //   for (var i = 0; i < this.fileInfoList.length; i++) {
      //     str += this.fileInfoList[i].baseUrl + ','
      //   }
      // }
      // if (str.length > 0) {
      //   this.obj.uploadImgs = str.substr(0, str.length - 1)
      // }

      this.onSave()
    },
    onConfirm3(values) {
      this.obj.provinceCode = values[0].code
      this.obj.cityCode = values[1].code
      this.obj.countyCode = values[2].code

      this.result = values
        .filter(item => !!item)
        .map(item => item.name)
        .join('/')

      this.showArea = false
    },
    openChoose() {
      this.natureShows1 = true
    },
    onConfirmType(value) {
      this.natureShows1 = false
      this.obj.breedCode = value.id
      this.breedName = value.name
    },
    openChoose2() {
      this.natureShows2 = true
    },
    onConfirmType2(value) {
      this.natureShows2 = false
      this.obj.gradeCode = value.id
      this.gradeName = value.name
    },

    // 开始时间
    onConfirmStartDate(value) {
      const timestamp = dayjs(value).valueOf()
      if (timestamp <= dayjs(this.obj.endDate || '2031-12-31').valueOf()) {
        this.obj.startDate = dayjs(value).format('YYYY-MM-DD')
      } else Toast('不得晚于停止时间')
      this.showPicker1 = false
    },
    // 结束时间
    onConfirmStartDate2(value) {
      const timestamp = dayjs(value).valueOf()
      if (timestamp >= dayjs(this.obj.startDate || '1987-1-1').valueOf()) {
        this.obj.endDate = dayjs(value).format('YYYY-MM-DD')
      } else Toast('不得早于开始时间')
      this.showPicker2 = false
    },
    onFailed(errorInfo) {
      Toast(errorInfo.errors[0].message)
    },
    onSave(value) {
      this.loading = true
      this.obj.uploadImgs	 = this.obj.fileInfoList.map(item => item.baseUrl).join(',')
      postHandle('/agri/api/yzbzh/sheepSupplyAndDemand/save', this.obj).then(res => {
        if (res.status == '0') {
          this.$toast(res.msg)

          this.$bridge.call('base.closePage')
        } else {
          this.$toast(res.msg)
        }
        setTimeout(() => {
          this.loading = false
        }, 1000)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .imgSty{
  display: block!important;
}
::v-deep .imgSty .van-field__control--left{
  display: block!important;
}
.shop {
  color: #fff;
}
.content {
  margin-top: 60px;
  background-color: #37b5b5 !important;
  justify-content: center !important;
}
.tip {
  padding-top: 15px;
  color: #999999;
  font-size: 12px;
  line-height: 16px;
  margin: auto;
}
.btn {
  width: 80%;
  margin: 50px auto 0 auto;
}
.btn > div {
  height: 50px;
  background: #2871fe;
  border-radius: 4px;
  text-align: center;
  line-height: 50px;
  color: #ffffff;
  font-size: 17px;
}
.btn .cancel {
  margin-top: 20px;
  background: rgba(40, 113, 254, 0.1);
  border: 1px solid #2871fe;
  color: #2871fe;
}
::v-deep .van-field__label {
  width: 6em;
}
.bthStyle {
  width: 56px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid #2871fe;
}
.active {
  background-color: #fff;
  color: #2871fe;
}
.add-btn {
  padding-bottom: 20px;
}
.addbtn {
  width: 50px;
  height: 24px;
  font-size: 13px;
  padding: 0;
  margin-right: 13px;
  z-index: 10;
  float: right;
  margin-top: -38px;
}
.btnfrom {
  padding: 14px 0;
}
.fromInput {
  width: 86%;
}
</style>
